<template>
  <div class="login-phone" v-if="isLoading">
    <div class="top-box">
      <div class="user-info">
        <div class="pic">
          <img :src="shareUserInfo.user.avatar" class="img-size-100" />
        </div>
        <div class="txt">{{ shareUserInfo.user.nick_name }}</div>
      </div>
      <div class="tips-txt">邀请您成为美时汇会员</div>
      <div class="nav-tips" v-if="pageData.share_amount">
        {{
          pageData.share_amount > 0
            ? `加入即可获得${pageData.share_amount}个美粉币`
            : "让我们一起玩转美粉币吧"
        }}
      </div>
    </div>
    <!-- <div class="input-box">
      <input type="text" class="input" placeholder="输入您的联系方式">
      <text class="delete-btn"></text>
    </div>
    <div class="input-box">
      <input type="text" class="input" placeholder="输入验证码">
      <a class="code-btn">发送验证码</a>
    </div> -->
    <button
      class="btn"
      @click="toLink('/pages/index/index')"
      v-if="userInfo.nick_name"
    >
      {{ pageData.share_amount > 0 ? "一键领取美粉币" : "一键加入" }}
    </button>
    <button
      class="btn"
      type="primary"
      @tap="getUserProfile"
      lang="zh_CN"
      v-else
    >
      {{ pageData.share_amount > 0 ? "一键领取美粉币" : "一键加入" }}
    </button>

    <!-- <a class="nav-btn" url>
      <text class="icon"></text>
      <text>微信快速领取</text>
    </a> -->
  </div>
</template>

<script>
import checkLogin from "@/common/check-login.js";
import { mapState, mapMutations } from "vuex";
var qs = require("qs");
export default {
  components: {},
  data() {
    return {
      pageData: {},
      shareUserInfo: {},
      isLoading: false
    };
  },

  computed: {
    ...mapState(["userInfo", "loginInfo"])
  },
  onLoad(options) {
    const shareCode =
      options.shareCode || qs.parse(decodeURIComponent(options.scene)).b;
    uni.showLoading({
      title: "加载中"
    });
    this.getShare();
    if (shareCode) {
      this.getShareInfo(shareCode);
    }
  },
  methods: {
    ...mapMutations(["changUserInfo"]),
    getShareInfo(share_code) {
      this.$api.getShareInfo({ share_code }).then(res => {
        if (res.code == 200) {
          this.isLoading = true;
          this.shareUserInfo = res.data;
        }
        uni.hideLoading();
      });
    },
    toLink(path) {
      if (checkLogin(path)) {
        uni.showModal({
          title: "提示",
          content: "您已是注册用户，是否前往首页",
          success: function(res) {
            if (res.confirm) {
              uni.switchTab({
                url: "/pages/index/index"
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          }
        });
      }
    },
    getShare() {
      this.$api.getShare().then(res => {
        if (res.code == 200) {
          this.pageData = res.data;
        }
      });
    },
    getUserProfile() {
      wx.getUserProfile({
        desc: '注册美时汇使用', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
            if (res.errMsg == "getUserProfile:ok") {
              wx.showLoading({
                title: "授权中...",
              });
              let { open_id, union_id } = this.loginInfo;
              let { encryptedData, iv } = res;
              this.$api
                  .getWxUserInfo({
                    encryptedData,
                    iv,
                    union_id,
                    open_id
                  })
                  .then(res => {
                    if (res.code == 200) {
                      this.changUserInfo(res.data.user_info);
                      uni.navigateTo({
                        url: "/pages/login/loginIndex?cbUrl=/pages/index/index"
                      });
                    }
                  });
            }
        }
      })
    },
  }
};
</script>

<style lang="scss">
.login-phone {
  color: #333333;
  font-size: 32rpx;
  line-height: 45rpx;
  padding: 0 30rpx;
  overflow: hidden;
  .img-size-100 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .top-box {
    margin: 120rpx auto;
    text-align: center;
    overflow: hidden;
    font-size: 36rpx;
    line-height: 50rpx;
    .user-info {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666666;
      font-size: 28rpx;
      .pic {
        flex: 0 0 68rpx;
        height: 68rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
      }
    }
    .tips-txt {
      margin-top: 60rpx;
    }
    .nav-tips {
      margin-top: 10rpx;
      color: #999999;
      font-size: 26rpx;
      line-height: 38rpx;
    }
  }
  .input-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    .input {
      flex: 1;
      height: 90rpx;
      padding-left: 20rpx;
    }
    .delete-btn {
      flex: 0 0 30rpx;
      height: 30rpx;
      background: url(https://media.wxcwy.com/mini/images/srqc_icon@2x.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .code-btn {
      height: 60rpx;
      line-height: 60rpx;
      flex: 0 0 285rpx;
      text-align: center;
      border-left: 1px solid #e7e7e7;
      color: #1772ff;
      font-size: 28rpx;
    }
  }
  .btn {
    display: block;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    margin: 80rpx auto 0;
    background: linear-gradient(
      270deg,
      rgba(44, 172, 255, 1) 0%,
      rgba(40, 123, 252, 1) 100%
    );
    border-radius: 8rpx;
    color: #fff;
  }
  .nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
    text-align: center;
    color: #03b213;
    .icon {
      flex: 0 0 56rpx;
      height: 46rpx;
      margin-right: 10rpx;
      background: url(https://media.wxcwy.com/mini/images/vx_icon2@2x.png) no-repeat center center;
      background-size: 100% 100%;
    }
  }
}
</style>
